var _domUtil = require('@antv/dom-util');

export default function(G6) {
    G6.registerBehavior('nodeTooltip', {
        getDefaultCfg() {
            return {
                item: 'node',
                offsetX: 0,
                offsetY: 0,
                formatText(model) {
                    return model.label;
                }
            };
        },
        getEvents() {
            return {
                'node:mouseenter': 'onMouseEnter',
                'node:mouseleave': 'onMouseLeave',
                'node:mousemove': 'onMouseMove'
            };
        },
        onMouseEnter(e) {
            const self = this;
            if (!self.shouldBegin(e)) {
                return;
            }
            const item = e.item;
            self.currentTarget = item;
            self.showTooltip(e);
            self.graph.emit('tooltipchange', { item: e.item, action: 'show' });
        },
        onMouseMove(e) {
            if (!this.shouldUpdate(e)) {
                this.hideTooltip();
                return;
            }
            if (!this.currentTarget || e.item !== this.currentTarget) {
                return;
            }
            this.updatePosition(e);
        },
        onMouseLeave(e) {
            if (!this.shouldEnd(e)) {
                return;
            }
            this.hideTooltip();
            this.graph.emit('tooltipchange', { item: this.currentTarget, action: 'hide' });
            this.currentTarget = null;
        },
        showTooltip(e) {
            const self = this;
            if (!e.item) {
                return;
            }
            let container = self.container;
            if (!container) {
                container = self._createTooltip(self.graph.get('canvas'));
                self.container = container;
            }
            e.item.set('tooltip', this);
            const text = self.formatText(e.item.get('model'), e);
            container.innerHTML = text;
            this.updatePosition(e);
            _domUtil.modifyCSS(this.container, { visibility: 'visible' });
        },
        hideTooltip() {
            _domUtil.modifyCSS(this.container, {
                visibility: 'hidden'
            });
        },
        updatePosition(e) {
            const bbox = this.currentTarget.getBBox();
            const matrix = e.target.get('totalMatrix');
            const devicePixelRatio = window.devicePixelRatio;
            const offsetX = matrix[6] / devicePixelRatio - bbox.centerX;
            const offsetY = matrix[7] / devicePixelRatio - bbox.centerY;
            const scale = matrix[0] / devicePixelRatio;
            let x = bbox.minX + offsetX + this.offsetX - (bbox.width * (scale - 1)) / 2;
            //let y = bbox.minY + bbox.height + offsetY + this.offsetY + (bbox.height * (scale - 1)) / 2;

            const tooltipRect = this.container.getBoundingClientRect();
            let y = bbox.maxY + offsetY + this.offsetY + (bbox.height * (scale - 1)) / 2;
            if (y + tooltipRect.height > this.height) {
                y = bbox.minY + offsetY - this.offsetY - (bbox.height * (scale - 1)) / 2 - tooltipRect.height;
                this.container.classList.remove('arrow-top');
                this.container.classList.add('arrow-bottom');
            } else {
                this.container.classList.remove('arrow-bottom');
                this.container.classList.add('arrow-top');
            }

            const left = x + 'px';
            const top = y + 'px';

            // const width = this.width;
            // const height = this.height;
            // const container = this.container;
            // let x = e.canvasX;
            // let y = e.canvasY;
            // console.error(x, y);

            // const bbox = container.getBoundingClientRect();
            // // x -= bbox.width;
            // // y -= bbox.height;
            // // if (x > width / 2) {
            // //     x -= bbox.width;
            // // } else {
            // //     x += OFFSET;
            // // }
            // // if (y > height / 2) {
            // //     y -= bbox.height;
            // // } else {
            // //     y += OFFSET;
            // // }
            // const left = x + 'px';
            // const top = y + 'px';
            _domUtil.modifyCSS(this.container, { left, top, visibility: 'visible' });
        },
        _createTooltip(canvas) {
            const el = canvas.get('el');
            el.style.position = 'relative';
            const container = _domUtil.createDom('<div class="g6-tooltip g6-' + this.item + '-tooltip arrow-top"></div>');
            el.parentNode.appendChild(container);
            _domUtil.modifyCSS(container, {
                position: 'absolute',
                visibility: 'visible'
            });
            this.width = canvas.get('width');
            this.height = canvas.get('height');
            this.container = container;
            return container;
        }
    });
}
